<template>
  <div style="display:inline-block">
    <el-input
      :controls="false"
      type="number"
      v-model="sectionVal[0]"
      :style="style"
      @change="minChange"
      :min="min"
      :max="sectionVal[1]-1"
      :step="step"
    >
      <i
        v-if="suffix"
        slot="suffix"
        class="suffix-text"
      >{{suffixText}}</i>
    </el-input>
    -
    <el-input
      :controls="false"
      type="number"
      v-model="sectionVal[1]"
      :style="style"
      @change="maxChange"
      :min="sectionVal[0]+1"
      :max="max"
      :step="step"
    >
      <i
        v-if="suffix"
        slot="suffix"
        class="suffix-text"
      >
        {{suffixText}}
      </i>
    </el-input>
  </div>
</template>

<script>
export default {
  model: {
    prop: "sectionVal",
    event: "change"
  },
  props: {
    width: {
      type: String,
      default() {
        return "100px";
      }
    },
    suffix: {
      type: Boolean,
      default() {
        return false;
      }
    },
    suffixText: {
      type: String,
      default() {
        return "￥";
      }
    },
    sectionVal: {
      type: Array,
      default() {
        return [null, null];
      }
    },
    min:{
      type:Number,
      default(){
        return 0;
      }
    },
    max:{
      type:Number,
      default(){
        return 100;
      }
    },
    step:{
      type:Number,
      default(){
        return 1;
      }
    }
  },
  computed: {
    style() {
      return {
        width: this.width
      };
    },
  },
  methods: {
    minChange(val,old) {
      if (val >= this.sectionVal[1]) {
        return false;
      }
    },
    maxChange(val) {
      if (val <= this.minVal) {
        return false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-input {
  .suffix-text {
    display: block;
    height: 100%;
    line-height: 32px;
  }
}
</style>
